import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import { dyManualMad, dyManualMadList } from './service';

import AddCommandForm from './components/AddCommandForm';

const TableList: React.FC = () => {
  const actionRef = useRef<ActionType>(null);
  const [dateRange, setDateRange] = useState<any>();
  const [dealCateVisible, handleDealCateVisible] = useState<boolean>(false);

  const columns: ProColumns<any>[] = [
    {
      title: '直播间名称',
      dataIndex: 'shopName',
      copyable: true,
    },
    {
      title: '关键词',
      dataIndex: 'keyword',
    },
    // {
    //   title: '口令状态',
    //   dataIndex: 'status',
    //   valueType: 'select',
    //   request: () => {
    //     return status;
    //   }
    // },

    {
      title: '后台比例',
      dataIndex: 'rate',
      hideInSearch: true,
      sorter: (a, b) => a.rate - b.rate,
      renderText(text) {
        return text / 100 + '%';
      },
    },
    {
      title: '执行次数',
      dataIndex: 'count',
      hideInSearch: true,
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '跟新时间',
      dataIndex: 'updateTime',
      valueType: 'dateTime',
      hideInSearch: true,
    },
    {
      title: '口令创建时间',
      dataIndex: 'orderDate',
      valueType: 'dateRange',
      hideInForm: true,
      hideInTable: true,
      search: {
        transform: (value) => {
          return {
            startTime: value[0],
            endTime: value[1],
          };
        },
        fieldProps: {
          value: dateRange,
          onChange: (value: any) => {
            if (value && value.length === 2) {
              setDateRange(value);
            }
          },
        },
      },
    },
  ];
  useEffect(() => {
    const startOfDay = new Date(new Date());
    startOfDay.setHours(0, 0, 0, 0);
    setDateRange([startOfDay, new Date()]);
  }, []);

  return (
    <PageContainer>
      <ProTable<API.RuleListItem, API.PageParams>
        headerTitle={'全部口令'}
        actionRef={actionRef}
        rowKey="id"
        scroll={{ x: '1100px' }}
        toolBarRender={() => [
          <Button
            key="23"
            type="primary"
            onClick={() => {
              handleDealCateVisible(true);
            }}
          >
            创建口令
          </Button>,
        ]}
        request={async (params: any) => {
          const defaultValues = columns.reduce((acc: any, column: any) => {
            if (column.fieldProps && column.fieldProps.value !== undefined) {
              acc[column.dataIndex] = column.fieldProps.value;
            }
            return acc;
          }, {});

          const startTime = +new Date(dateRange[0]);
          const endTime = new Date(dateRange[1]).setHours(23, 59, 59, 0);

          // 将默认值合并到请求参数中
          const data = { ...params, ...defaultValues, startTime, endTime };

          const rsp = await dyManualMadList(data);
          if (rsp.code === 'SUCCESS') {
            return {
              data: rsp.data.data,
              total: rsp.data.total,
            };
          }
        }}
        pagination={{
          pageSize: 20,
        }}
        columns={columns}
      />
      <AddCommandForm
        onSubmit={async (value: any) => {
          const rsp = await dyManualMad(value);
          if (rsp.code === 'SUCCESS') {
            handleDealCateVisible(false);
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          handleDealCateVisible(false);
        }}
        updateModalVisible={dealCateVisible}
        values={{}}
      />
    </PageContainer>
  );
};
export default TableList;
